

import React, { Component } from 'react';// 各种包一定要注意导入
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
    ScrollView
} from 'react-native';
import Slider from '../../com/Slider';
import NavigatorBar from '../../com/NavigationBar';
import Icon from 'react-native-vector-icons/FontAwesome';


import ScrollableTabView from 'react-native-scrollable-tab-view'

import FeedsCategoryBar from '../../com/FeedsCategoryBar'

import Home_04 from './Home_01';
import Home_05 from './Home_01';
import Home_06 from './Home_01';



const titles = ['精选', '女频', '男频'];
const controllers = [
    { type: 1, controller: Home_04 },
    { type: 2, controller: Home_05 },
    { type: 3, controller: Home_06 }
]


class Home_03 extends Component {


    constructor(props) {
        super(props);
    }

    render() {
        const { navigator } = this.props;
        return (
            <View style={styles.appContainer}>
                <NavigatorBar
                    hide={true}
                    title={'首页'}
                    style={styles.navigatorBar}
                    leftButton={this.renderLeftButton('')}
                    rightButton={this.renderRightButton('')}
                />
                <ScrollableTabView
                    renderTabBar={() => <FeedsCategoryBar tabNames={titles} />}
                    tabBarPosition='top'
                    scrollWithoutAnimation={false}
                >
                    {controllers.map((data, index) => {
                        let Component = data.controller;
                        return (
                            <Component
                                key={titles[index]}
                                tabLabel={titles[index]}
                                categoryId={data.type}
                                navigator={navigator}
                            />
                        )
                    })}
                </ScrollableTabView>
            </View>
        );
    }

    // 渲染按钮
    renderLeftButton(image) {
        return <TouchableOpacity
            onPress={() => {
                this.props.navigator.pop();
            }}>
            <Icon name="angle-left" size={24} color="#333" />

        </TouchableOpacity>;
    }

    renderRightButton(image) {
        return <TouchableOpacity
            onPress={() => this.goToSearchPage()}
            style={{ padding: 8 }}
        >
        </TouchableOpacity>;
    }


}

const styles = StyleSheet.create({
    appContainer: {
        flex: 1,
        backgroundColor: 'white'
    }
});

export default Home_03;